<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../mofumui/mofumui.js" ></script>
	</head>
	<body>
		<script type="text/javascript">
			//设置JS路由
			mofum.setPrefix("../../");
			mofum.imports(["MFrame","MCarousel","MPanel"],function(MFrame,MCarousel,MPanel){
				
				//创建框架
				var frame = new MFrame().setPositionSize();
				
				//新建一个轮播
				var carousel = new MCarousel().setSize(800,400).setBackground("#000");
				
				//新建一个Panel
				var sub = new MPanel();
				sub.setContent("cccccc").setFontColor("#fff");
				
				//图片组件懒加载
				carousel.setLazyLoad(true);
				
				//设置组件集合
				carousel.setComponents(["img/bg.jpg","img/bg.jpg","img/bg.jpg",sub]);
				
				//点击翻页
				carousel.handle("click",function(){
					carousel.next();
				});
				
				//默认是以方块样式，如果想要修改单独，或整体样式可以这样做。
				carousel.updateBlockButtons(function(comp){
					//选中样式
					comp.onSelect = function(){
						comp.setStyle("background-color","#fff").setOpaque(100);
						comp.setStyle("border-radius","10px");
					};
					
					//默认样式
					comp.onDefault = function(){
						comp.setStyle("background-color","#fff").setOpaque(50);
						comp.setStyle("border-radius","10px");
					};
					
				});
				
				//关闭垂直轮播（启用水平轮播）
				carousel.closeVertical(false);
				
				//开始轮播
				carousel.start();
				
				//渲染一个静态轮播
//				carousel.renderStatic();
				
				//指示器，如是水平轮播，则LEFT,RIGHT 设置无效，如果是垂直轮播，则TOP,BOTTOM无效
				carousel.setIndicatorPosistion("BOTTOM");
				
				carousel.setSize(400,260);
				
				//设置文本
				frame.append(carousel);
				
			});
			
		</script>
	</body>
</html>
